<template>
  <div>
    <h1>模拟-前端路由</h1>
    <router-link to="/home" active-class="active" exact-active-class="exact"
      >首页</router-link
    >
    <router-link to="/movie" active-class="active" exact-active-class="exact"
      >电影</router-link
    >
    <router-link to="/about" active-class="active" exact-active-class="exact"
      >关于</router-link
    >
    <div style="border: 1px solid red">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style>
a {
  padding-left: 10px;
}
.active {
  color: red;
}
.exact {
  color: red;
}
</style>
